<script setup>
import {ref} from 'vue';
import {ElMessage} from 'element-plus';
import {getCityListApi, getOpenedCityListApi} from '@/service/zone.js';
import {updateZoneApi} from '@/service/member.js';

const visible = ref(false);

const zoneList = ref([]);
const openedList = ref([]);
// 获取开放的城市列表
const fetchOpenedList = () => {
  getOpenedCityListApi().then(res => {
    if (res.code === 200) {
      openedList.value = res.data.list;
    }
  });
};

// 表单
const ruleForm = reactive({
  id: '',
  city_id: '',
  zone: [],
});

// 获取城市列表
const zoneRef = ref(null);
const fetchCityList = (id) => {
  getCityListApi({id, is_open: 1}).then(res => {
    if (res.code === 200) {
      zoneList.value = res.data.list;
    }
  });
};

// 选择区域
const chooseZone = (e) => {
  console.log(e);
  // 将选择的区域添加到已选区域form.zone
  const item = zoneList.value.find(i => i.id == e);
  // 判断是否已经选择
  if (ruleForm.zone.find(i => i.id == e)) {
    ElMessage.warning('已选择该区域');
    return;
  }
  ruleForm.zone.push(item);
};

// 删除已选区域
const removeItem = (item) => {
  const index = ruleForm.zone.findIndex(i => i.id == item.id);
  ruleForm.zone.splice(index, 1);
};


// rules
const rules = ref({
  city_id: [
    {required: true, message: '请选择城市', trigger: 'change'},
  ],
});

// 打开弹窗
const openDialog = (row) => {
  visible.value = true;
  Object.assign(ruleForm, row);

  fetchCityList(row.city_id);
};

const ruleFormRef = ref(null);
// 关闭弹窗
const closeDialog = () => {
  visible.value = false;
  // init form
  ruleFormRef.value.resetFields();
};

// 提交表单
const submitForm = () => {
  // 验证表单并提交
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      updateZoneApi(ruleForm).then(res => {
        if (res.code === 200) {
          closeDialog();
          ElMessage.success(res.msg);
        } else {
          ElMessage.error(res.msg);
        }
      });
    } else {
      return false;
    }
  });


};

defineExpose({
  openDialog
});

onMounted(() => {
  fetchOpenedList();
});

</script>

<template>
  <el-dialog v-model="visible" title="更新区域" width="30%" append-to-body>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" label-position="top"
             :validate-on-rule-change="false">
      <el-form-item label="城市" prop="city_id">
        <el-row :gutter="10" style="width:100%">
          <el-col :span="12">
            <el-select v-model="ruleForm.city_id" placeholder="请选择城市"
                       @change="fetchCityList">
              <el-option
                  v-for="item in openedList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id" />
            </el-select>
          </el-col>
          <el-col :span="12">
            <el-select ref="zoneRef" filterable clearable placeholder="请选择区域"
                       @change="chooseZone">
              <el-option
                  v-for="item in zoneList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="已选区域" prop="zone">
        <el-tag v-for="item in ruleForm.zone" :key="item.id" closable @close="removeItem(item)" style="margin-right: 6px;">
          {{ item.name }}
        </el-tag>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog" :autofocus="true">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<style scoped>

</style>
